<template>
  <div class="app-container">
    <div class="filter-container" style="color:#909399;font-size:14px;">{{posmerchantInfo.name}}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="商户类型">
            <el-radio-group v-model="ruleForm.merType">
                <el-radio :disabled="ruleForm.channelList[0].acctType=='02'" label="MERCHANT_01">自然人</el-radio>
                <el-radio label="MERCHANT_02">个体工商户</el-radio>
                <el-radio label="MERCHANT_03">企业</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item :label="ruleForm.merType=='MERCHANT_01'?'负责人':'法人姓名'" prop="legalName" ref="legalName">
            <el-input v-model="ruleForm.legalName"></el-input>
        </el-form-item>
        <el-form-item :label="ruleForm.merType=='MERCHANT_01'?'负责人手机号':'法人手机号'" prop="legalMobile" ref="legalMobile">
            <el-input v-model="ruleForm.legalMobile"></el-input>
        </el-form-item>
        <el-form-item label="商户名" prop="merFullName" ref="merFullName">
            <el-input v-model="ruleForm.merFullName">
                <template slot="prepend" v-if="ruleForm.merType=='MERCHANT_01'">商户_</template>
            </el-input>
        </el-form-item>
        <el-form-item label="商户简称" prop="merName" ref="merName">
            <el-input v-model="ruleForm.merName"></el-input>
        </el-form-item>
        <el-form-item :label="ruleForm.merType=='MERCHANT_01'?'负责人身份证号':'法人身份证号'" prop="legalCertNo" ref="legalCertNo">
            <el-input v-model="ruleForm.legalCertNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证类型" prop="legalCertType" ref="legalCertType">
            <el-radio-group v-model="ruleForm.legalCertType">
                <el-radio label="0">定期</el-radio>
                <el-radio label="1">长期</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证起始日期" prop="legalCertStartDate" ref="legalCertStartDate">
            <el-date-picker
                v-model="ruleForm.legalCertStartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证截止日期" prop="legalCertEndDate" ref="legalCertEndDate" v-if="ruleForm.legalCertType==0">
            <el-date-picker
                v-model="ruleForm.legalCertEndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="营业执照号" prop="licId" ref="licId" v-if="ruleForm.merType!='MERCHANT_01'">
            <el-input v-model="ruleForm.licId"></el-input>
        </el-form-item>
        <el-form-item label="营业执照类型" prop="businesslicenseType" ref="businesslicenseType" v-if="ruleForm.merType!='MERCHANT_01'">
            <el-radio-group v-model="ruleForm.businesslicenseType">
                <el-radio label="0">定期</el-radio>
                <el-radio label="1">长期</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="营业执照起始日期" prop="businesslicenseStart" ref="businesslicenseStart" v-if="ruleForm.merType!='MERCHANT_01'">
            <el-date-picker
                v-model="ruleForm.businesslicenseStart"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="营业执照截止日期" prop="businesslicenseExpired" ref="businesslicenseExpired" v-if="ruleForm.businesslicenseType==0&&ruleForm.merType!='MERCHANT_01'">
            <el-date-picker
                v-model="ruleForm.businesslicenseExpired"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="门店所在地" prop="shopArea" ref="shopArea">
            <el-cascader v-model="ruleForm.shopArea" :options="areaList" :props="{'value':'code','label':'name','children':'sub'}" filterable></el-cascader>
        </el-form-item>
        <el-form-item label="门店详细地址" prop="addr" ref="addr">
            <el-input v-model="ruleForm.addr"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactName" ref="contactName">
            <el-input v-model="ruleForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号" prop="contactMobile" ref="contactMobile">
            <el-input v-model="ruleForm.contactMobile"></el-input>
        </el-form-item>
        <el-form-item label="联系人身份证号" prop="contactIdNo" ref="contactIdNo">
            <el-input v-model="ruleForm.contactIdNo"></el-input>
        </el-form-item>
        <el-form-item label="客服电话" prop="servicePhoneNo" ref="servicePhoneNo">
            <el-input v-model="ruleForm.servicePhoneNo"></el-input>
        </el-form-item>
        <el-form-item label="被授权人姓名" prop="authName" ref="authName" v-if="ruleForm.channelList[0].isLegalNameAcct=='0'">
            <el-input v-model="ruleForm.authName"></el-input>
        </el-form-item>
        <el-form-item label="被授权人身份证号" prop="authCertNo" ref="authCertNo" v-if="ruleForm.channelList[0].isLegalNameAcct=='0'">
            <el-input v-model="ruleForm.authCertNo"></el-input>
        </el-form-item>
        <!-- <el-form-item label="结算账号信息"></el-form-item> -->
        <template v-for="(item,index) in ruleForm.channelList">
            <el-form-item label="账户类型" :prop="'channelList.' + index + '.acctType'" :rules="{ required: true, message: '账户类型不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.acctType'">
                <el-select v-model="item.acctType">
                    <el-option value="01" label="对私"></el-option>
                    <el-option value="02" :disabled="ruleForm.merType=='MERCHANT_01'" label="对公"></el-option>
                </el-select>                
            </el-form-item>
            <el-form-item label="是否法人同名账户" :disabled="ruleForm.merType=='MERCHANT_01'&&ruleForm.channelList[0].acctType=='01'">
                <el-radio-group v-model="item.isLegalNameAcct">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="银行卡号" :prop="'channelList.' + index + '.account'" :rules="{ required: true, message: '银行卡号不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.account'">
                <el-input v-model="item.account"></el-input>
            </el-form-item>
            <el-form-item label="开户名称" :prop="'channelList.' + index + '.acctName'" :rules="{ required: true, message: '开户名称不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.acctName'">
                <el-input v-model="item.acctName"></el-input>
            </el-form-item>
            <el-form-item label="开户银行" :prop="'channelList.' + index + '.bankName'" :rules="{ required: true, message: '开户银行不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.bankName'">
                <el-select v-model="item.bankName" filterable @change="getSubBankList($event,index,true)" placeholder="请选择" >
                    <el-option
                        v-for="(items,index) in bankList"
                        :key="index"
                        :label="items.bankname"
                        :value="items.bankname">
                    </el-option>
                </el-select>                
            </el-form-item>
            <el-form-item label="开户支行" :prop="'channelList.' + index + '.branchName'" :rules="{ required: true, message: '开户支行不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.branchName'">
                <el-select v-model="item.branchName" filterable remote reserve-keyword  :remote-method="(query)=>{getSubBankList(query,index)}" @change="getSubBranchName($event,index)" placeholder="请选择">
                    <el-option
                        v-for="items in subBankList"
                        :key="items.bankNo"
                        :label="items.subBranchName"
                        :value="items.subBranchName">
                    </el-option>
                </el-select>                
            </el-form-item>
            <el-form-item label="支行联行号" :prop="'channelList.' + index + '.pbcBankId'" :rules="{ required: true, message: '支行联行号不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.pbcBankId'">
                <el-input v-model="item.pbcBankId"></el-input>
            </el-form-item>
            <el-form-item label="开户行省市区" :prop="'channelList.' + index + '.branchArea'" :rules="{ required: true, message: '支行联行号不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.branchArea'">
                <el-cascader v-model="item.branchArea" :options="areaList" :props="{value:'code',label:'name',children:'sub'}" filterable></el-cascader>
            </el-form-item>
            <el-form-item label="银行预留手机号" :prop="'channelList.' + index + '.bankReserveMobile'" :rules="{ required: true, message: '银行预留手机号不能为空', trigger: 'blur' }" :ref="'channelList.' + index + '.bankReserveMobile'">
                <el-input v-model="item.bankReserveMobile"></el-input>
            </el-form-item>
            <el-form-item label="结算方式">
                <el-radio-group v-model="item.settleType">
                    <el-radio label="D1">D1</el-radio>
                    <el-radio label="T1">T1</el-radio>
                </el-radio-group>
            </el-form-item>
        </template>
        <!-- <el-form-item label="通道信息"></el-form-item> -->
        <template v-for="(item,index) in ruleForm.channelList[0].prdList">
            <el-form-item label="支付产品">
                <div>{{item.paymentPrdNo=='WX'?'微信':'支付宝'}}</div>
            </el-form-item>
            <el-form-item label="费率" :prop="'channelList.0.prdList.'+index+'.feeTemplate'" :rules="{ required: true, message: '费率不能为空', trigger: 'blur' }" :ref="'channelList.0.prdList.'+index+'.feeTemplate'">
                <el-input v-model="item.feeTemplate"></el-input>
            </el-form-item>
        </template>
        <el-form-item label="法人身份证正面" prop="picList.0.picId" ref="picList.0.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/0'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[0].picId" :src="ruleForm.picList[0].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenA">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="法人身份证反面" prop="picList.1.picId" ref="picList.1.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/1'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[1].picId" :src="ruleForm.picList[1].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenB">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="营业执照" prop="picList.2.picId" ref="picList.2.picId" v-if='ruleForm.merType!="MERCHANT_01"'>
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/2'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[2].picId" :src="ruleForm.picList[2].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhizhao">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="开户许可证" prop="picList.3.picId" ref="picList.3.picId" v-if="ruleForm.merType!='MERCHANT_01'&&ruleForm.channelList[0].acctType=='02'">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/3'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[3].picId" :src="ruleForm.picList[3].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="门头照" prop="picList.4.picId" ref="picList.4.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/4'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[4].picId" :src="ruleForm.picList[4].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_mentou">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="其他">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/5'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[5].picId" :src="ruleForm.picList[5].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_cailiao">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="收银台照片" prop="picList.6.picId" ref="picList.6.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/6'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[6].picId" :src="ruleForm.picList[6].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shouyin">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="门店内景照片" prop="picList.7.picId" ref="picList.7.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/7'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[7].picId" :src="ruleForm.picList[7].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_mennei">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="法人持证件照" prop="picList.8.picId" ref="picList.8.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/8'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[8].picId" :src="ruleForm.picList[8].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shouchi">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="商户收单协议照片" prop="picList.9.picId" ref="picList.9.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/9'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[9].picId" :src="ruleForm.picList[9].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_cailiao">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="结算授权书" prop="picList.10.picId" ref="picList.10.picId" v-if="ruleForm.channelList[0].isLegalNameAcct=='0'">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/10'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[10].picId" :src="ruleForm.picList[10].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="银行卡正面照" prop="picList.11.picId" ref="picList.11.picId">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/11'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[11].picId" :src="ruleForm.picList[11].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_card">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="被授权人证件正面照" prop="picList.13.picId" ref="picList.13.picId" v-if="ruleForm.channelList[0].isLegalNameAcct=='0'">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/13'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[13].picId" :src="ruleForm.picList[13].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenA">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="被授权人证件背面照" prop="picList.14.picId" ref="picList.14.picId" v-if="ruleForm.channelList[0].isLegalNameAcct=='0'">
            <el-upload
                class="avatar-uploader"
                :action="domain+'/merchantimg/upload/14'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.picList[14].picId" :src="ruleForm.picList[14].picId" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenB">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getSelect">保存</el-button>
            <el-button type="primary" :loading="formLoading" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="history.go(-1);">取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<style>
.avatar-uploader .el-upload { border: 1px dashed #ffffff; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; }
.avatar-uploader .el-upload:hover { border-color: #409EFF; }
.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 170px; height: 112px; line-height: 112px; text-align: center; }
.avatar { width: 170px; height: 112px; display: block; }
.el-icon-plus img{ width: 170px; height: 112px; position: absolute; left: 0; top: 0;}
</style>

<script>
import { bankList, merchantSelect, getPosmerchant, merchantInput, hltxaddpart,subBankList } from '@/api/api.verify.js'
import photo_cailiao from "@/assets/images/photo_cailiao.png"
import photo_card from "@/assets/images/photo_card.png"
import photo_mennei from "@/assets/images/photo_mennei.png"
import photo_mentou from "@/assets/images/photo_mentou.png"
import photo_shenfenA from "@/assets/images/photo_shenfenA.png"
import photo_shenfenB from "@/assets/images/photo_shenfenB.png"
import photo_shouchi from "@/assets/images/photo_shouchi.png"
import photo_shouyin from "@/assets/images/photo_shouyin.png"
import photo_zhengming from "@/assets/images/photo_zhengming.png"
import photo_zhizhao from "@/assets/images/photo_zhizhao.png"
import { rawCitiesData } from "@/utils/city-data.js"
import { domain } from "@/utils/config.js"
import { getToken } from '@/utils/auth'

export default {
  name: 'HuluForm',
  data() {
    return {
      photo_cailiao:photo_cailiao,
      photo_card:photo_card,
      photo_mennei:photo_mennei,
      photo_mentou:photo_mentou,
      photo_shenfenA:photo_shenfenA,
      photo_shenfenB:photo_shenfenB,
      photo_shouchi:photo_shouchi,
      photo_shouyin:photo_shouyin,
      photo_zhengming:photo_zhengming,
      photo_zhizhao:photo_zhizhao,
      domain:domain,
      headers:{token:getToken()},
      formLoading:false,//确认按钮

      posmerchantInfo:{},//门店信息
      areaList:rawCitiesData,//省市区列表
      bankList:[],//银行列表
      subBankList:[],//支行列表
      ruleForm: {
          merType:'MERCHANT_03',//商户类型
          merName:'',//商户简称
          merFullName:'',//商户全称
          mcc:'5311',//经营类目
          licId:'',//营业执照号
          legalName:'',//负责人姓名
          legalCertNo:'',//负责人证件号码
          legalCertType:'0',//证件类型
          legalCertStartDate:'',//证件起始日期
          legalCertEndDate:'',//证件截止日期
          legalMobile:'',//负责人手机号
          authName:'',//被授权人姓名
          authCertNo:'',//被授权人证件号码
          contactName:'',//联系人姓名
          contactMobile:'',//联系人手机号
          contactIdNo:'',//联系人证件号码
          servicePhoneNo:'',//客服电话
          shopArea:[],//门店省市区代码
          province:'',//省份
          city:'',//城市
          area:'',//区县
          addr:'',//地址
          email:'',//邮箱
          businesslicenseType:'0',//营业执照有效期类型
          businesslicenseStart:'',//营业执照起始日期
          businesslicenseExpired:'',//营业执照截止日期
          picList:[
              {
                  picType:'0001',//图片类型
                  picName:'身份证正面',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0002',//图片类型
                  picName:'身份证反面',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0003',//图片类型
                  picName:'营业执照',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0005',//图片类型
                  picName:'开户许可证',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0006',//图片类型
                  picName:'门头照',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0007',//图片类型
                  picName:'其他',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0008',//图片类型
                  picName:'收银台照片',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0009',//图片类型
                  picName:'门店内景照片',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0012',//图片类型
                  picName:'法人持证件照',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0013',//图片类型
                  picName:'商户收单协议照片',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0014',//图片类型
                  picName:'结算授权书',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0015',//图片类型
                  picName:'银行卡正面照',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0016',//图片类型
                  picName:'银行卡背面照',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0017',//图片类型
                  picName:'被授权人证件正面照',//图片名称
                  picId:'',//图片地址
              },
              {
                  picType:'0018',//图片类型
                  picName:'被授权人证件背面照',//图片名称
                  picId:'',//图片地址
              },
          ],//图片列表
          channelList:[{//绑定收单机构列表
              channelId:'DEFAULT',//收单机构号
              settleType:'D1',//结算方式
              acctType:'02',//结算账号类型/02 对公 /01 对私
              isLegalNameAcct:'1',//是否法人同名账户/1 是 /0否
              account:'',//结算账号
              acctName:'',//开户名称
              pbcBankId:'',//开户银行支行联行号
              bankReserveMobile:'',//银行预留手机号
              payLimit:'',//禁用支付类型
              bankName:'',//开户银行名称
              bankCode:'',//开户银行银行号
              branchName:'',//开户支行名称
              branchArea:[],//开户支行省市区
              branchProvince:'',//开户支行所在省份
              branchCity:'',//开户支行所在市
              branchCounty:'',//开户支行所在区县
              prdList:[
                  {//产品列表
                      paymentPrdNo:'WX',//支付产品号
                      feeType:'01',//费率类型
                      feeTemplate:'',//费率模板
                      extParams:'',//扩展字段
                      partnerId:'',//微信的传 channelId 的值支付宝传 pid 的值
                  },
                  {//产品列表
                      paymentPrdNo:'ALI',//支付产品号
                      feeType:'01',//费率类型
                      feeTemplate:'',//费率模板
                      extParams:'',//扩展字段
                      partnerId:'',//微信的传 channelId 的值支付宝传 pid 的值
                  },],
          },  ],

      },
      rules: {
          legalName: [
              {required: true, message: '请输入负责人/法人姓名', trigger: 'blur'},
          ],
          legalCertNo: [
              {required: true, message: '请输入负责人手机号/法人手机号', trigger: 'blur'},
          ],
          merFullName: [
              {required: true, message: '请输入商户名', trigger: 'blur'},
          ],
          merName: [
              {required: true, message: '请输入商户简称', trigger: 'blur'},
          ],
          legalMobile: [
              {required: true, message: '请输入负责人身份证号/法人身份证号', trigger: 'blur'},
          ],
          licId: [
              {required: true, message: '请输入营业执照号', trigger: 'blur'},
          ],
          legalCertType: [
              {required: true, message: '请选择身份证类型', trigger: 'blur'},
          ],
          legalCertStartDate: [
              {required: true, message: '请选择身份证起始日期', trigger: 'blur'},
          ],
          legalCertEndDate: [
              {required: true, message: '请选择身份证截止日期', trigger: 'blur'},
          ],
          businesslicenseType: [
              {required: true, message: '请选择营业执照类型', trigger: 'blur'},
          ],
          businesslicenseStart: [
              {required: true, message: '请选择营业执照起始日期', trigger: 'blur'},
          ],
          businesslicenseExpired: [
              {required: true, message: '请选择营业执照截止日期', trigger: 'blur'},
          ],
          shopArea: [
              {required: true, message: '请选择门店所在地', trigger: 'blur'},
          ],
          addr: [
              {required: true, message: '请输入门店详细地址', trigger: 'blur'},
          ],
          contactName: [
              {required: true, message: '请输入联系人姓名', trigger: 'blur'},
          ],
          contactMobile: [
              {required: true, message: '请输入联系人手机号', trigger: 'blur'},
          ],
          contactIdNo: [
              {required: true, message: '请输入联系人身份证号', trigger: 'blur'},
          ],
          servicePhoneNo: [
              {required: true, message: '请输入客服电话', trigger: 'blur'},
          ],
          authName: [
              {required: true, message: '请输入被授权人姓名', trigger: 'blur'},
          ],
          authCertNo: [
              {required: true, message: '请输入被授权人身份证号', trigger: 'blur'},
          ],
          'picList.0.picId': [
              {required: true, message: '请添加身份证正面', trigger: 'blur'},
          ],
          'picList.1.picId': [
              {required: true, message: '请添加身份证反面', trigger: 'blur'},
          ],
          'picList.2.picId': [
              {required: true, message: '请添加营业执照', trigger: 'blur'},
          ],
          'picList.3.picId': [
              {required: true, message: '请添加开户许可证', trigger: 'blur'},
          ],
          'picList.4.picId': [
              {required: true, message: '请添加门头照', trigger: 'blur'},
          ],
          'picList.6.picId': [
              {required: true, message: '请添加收银台照片', trigger: 'blur'},
          ],
          'picList.7.picId': [
              {required: true, message: '请添加门店内景照片', trigger: 'blur'},
          ],
          'picList.8.picId': [
              {required: true, message: '请添加法人持证件照', trigger: 'blur'},
          ],
          'picList.9.picId': [
              {required: true, message: '请添加商户收单协议照片', trigger: 'blur'},
          ],
          'picList.10.picId': [
              {required: true, message: '请添加结算授权书', trigger: 'blur'},
          ],
          'picList.13.picId': [
              {required: true, message: '请添加被授权人证件正面照', trigger: 'blur'},
          ],
          'picList.14.picId': [
              {required: true, message: '请添加被授权人证件背面照', trigger: 'blur'},
          ],
      },
    }
  },
  created() {
    this.posmerchantInfo=this.$route.query
    this.getStart();
  },
  methods: {
    getStart() {//初始化
        let _this=this;
        bankList({}).then(d=>{//获取银行列表
          _this.bankList=d.data
          _this.getMerchantSelect();//进件信息查询
        });
    },
    getMerchantSelect(){//进件信息查询
        let  _this=this;
        let data={};
        data.merchantId=this.posmerchantInfo.id
        data.channelId="321";
        merchantSelect(data).then(d=>{
          if(d.data&&d.data.inputInfo){
            let form=JSON.parse(d.data.inputInfo)
            for(let i=0;i<form.picList.length;i++){
                if(form.picList[i].picId){}else{
                    form.picList[i].picId=""
                }
            }
            _this.ruleForm=form
          }else{
              _this.getPosmerchant();
          }
        });
    },
    getPosmerchant(){//商户信息查询
        let data={};
        let _this=this;
        data.id=this.posmerchantInfo.id
        getPosmerchant(data,'GET').then(da=>{
          let d=da.data;
          switch(d.merchantType){//企业类型
              case "4"://企业
                  _this.ruleForm.merType="MERCHANT_03";
                  break;
              case "5"://个体工商户
                  _this.ruleForm.merType="MERCHANT_02";
                  break;
              case "6"://个人
                  _this.ruleForm.merType="MERCHANT_01";
                  break;
              default:
                  _this.ruleForm.merType="MERCHANT_01";
          };
          _this.ruleForm.merName=d.merchantShortName;//商户简称
          _this.ruleForm.merFullName=d.licenseName;//商户全称
          _this.ruleForm.legalName=d.lawyer;//负责人姓名
          _this.ruleForm.legalCertNo=d.idCardNo;//负责人证件号码
          if(d.lawyerCardEnd=="长期"||d.lawyerCardEnd=="2099-12-31"){
              _this.ruleForm.legalCertType='1';//证件类型
              _this.ruleForm.legalCertEndDate="2099-12-31"
          }else{
             _this.ruleForm.legalCertEndDate=d.lawyerCardEnd;//证件截止日期
          }
          _this.ruleForm.legalCertStartDate=d.lawyerCardBgn;//证件起始日期
          _this.ruleForm.legalMobile=d.lawerPhone;//负责人手机号
          _this.ruleForm.authName=d.accountName;//被授权人姓名
          _this.ruleForm.authCertNo=d.holderCardNo;//被授权人证件号码
          _this.ruleForm.contactName=d.linkName;//联系人姓名
          _this.ruleForm.contactMobile=d.phone;//联系人手机号
          _this.ruleForm.contactIdNo=d.superIdCard;//联系人证件号码
          _this.ruleForm.servicePhoneNo=d.servicePhone;//客服电话
          if(d.province&&d.province&&d.province){
              try{
                  let provinces=_this.areaList.find(t=>t.name==d.province).code;
                  let citys=_this.areaList.find(t=>t.name==d.province).sub.find(t=>t.name==d.city).code
                  let countrys=_this.areaList.find(t=>t.name==d.province).sub.find(t=>t.name==d.city).sub.find(t=>t.name==d.country).code
                  _this.ruleForm.shopArea=[provinces,citys,countrys]//门店省市区名称
              }catch(e){
                  console.log(e);
              }
          }
          _this.ruleForm.addr=d.saleAddress;//地址
          _this.ruleForm.email=d.email;//邮箱
          _this.ruleForm.licId=d.license;//营业执照号
          if(d.licenseCardEnd=="长期"||d.licenseCardEnd=="2099-12-31"){
              _this.ruleForm.businesslicenseType='1';//营业执照有效期类型
              _this.ruleForm.businesslicenseExpired="2099-12-31"
          }else{
            _this.ruleForm.businesslicenseExpired=d.licenseCardEnd;//营业执照截止日期
          }
          _this.ruleForm.businesslicenseStart=d.licenseCardBgn;//营业执照起始日期
          if(d.d0Flag==1){
              _this.ruleForm.channelList[0].settleType="T1";//结算方式
          }else{
              _this.ruleForm.channelList[0].settleType="D1";//结算方式
          }
          switch(d.accountType){//结算类型
              case "1"://对公
                  _this.ruleForm.channelList[0].acctType="02";
                  break;
              case "2"://对法人
                  _this.ruleForm.channelList[0].acctType="01";
                  _this.ruleForm.channelList[0].isLegalNameAcct='1';
                  break;
              case "3"://非法人
                  _this.ruleForm.channelList[0].acctType="01";
                  _this.ruleForm.channelList[0].isLegalNameAcct='0';
                  break;
          }
          _this.ruleForm.channelList[0].account=d.accountNo;//结算账号
          _this.ruleForm.channelList[0].acctName=d.accountName;//开户名称
          if(d.bankName){
              _this.ruleForm.channelList[0].bankCode=_this.bankList.find(t=>t.bankname==d.bankName);//开户银行银行号
          }
          if(d.bankName&&d.subBranchName){//开户银行支行联行号
              _this.getSubBankNo(d.bankName,d.subBranchName)
          }
          _this.ruleForm.channelList[0].bankReserveMobile=d.reservedPhone;//银行预留手机号
          _this.ruleForm.channelList[0].bankName=d.bankName;//开户银行名称
          _this.ruleForm.channelList[0].branchName=d.subBranchName;//开户支行名称
          if(d.accountProvince&&d.accountProvince&&d.accountProvince){
              try{
                  let branchProvince=_this.areaList.find(t=>t.name==d.accountProvince).code;
                  let branchCity=_this.areaList.find(t=>t.name==d.accountProvince).sub.find(t=>t.name==d.accountCity).code
                  let branchCounty=_this.areaList.find(t=>t.name==d.accountProvince).sub.find(t=>t.name==d.accountCity).sub.find(t=>t.name==d.accountCountry).code;
                  _this.ruleForm.channelList[0].branchArea=[branchProvince,branchCity,branchCounty];//开户支行省市区
                  _this.ruleForm.channelList[0].branchProvince=branchProvince;//开户支行所在省份
                  _this.ruleForm.channelList[0].branchCity=branchCity;//开户支行所在市
                  _this.ruleForm.channelList[0].branchCounty=branchCounty;//开户支行所在区县
              }catch(e){
                  console.log(e);
              }
          };
          _this.ruleForm.channelList[0].prdList=[
              {//产品列表
                  paymentPrdNo:'WX',//支付产品号
                  feeType:'01',//费率类型
                  feeTemplate:d.transRuleType,//费率模板
                  extParams:'',//扩展字段
                  partnerId:'',//微信的传 channelId 的值支付宝传 pid 的值
              },
              {//产品列表
                  paymentPrdNo:'ALI',//支付产品号
                  feeType:'01',//费率类型
                  feeTemplate:d.transRuleType,//费率模板
                  extParams:'',//扩展字段
                  partnerId:'',//微信的传 channelId 的值支付宝传 pid 的值
              },];
          _this.ruleForm.picList[0].picId=d.type120;// 身份证正面
          _this.ruleForm.picList[1].picId=d.type130;//身份证反面
          _this.ruleForm.picList[2].picId=d.type70;//营业执照
          _this.ruleForm.picList[3].picId=d.type110;//开户许可证
          _this.ruleForm.picList[4].picId=d.type10;//门头照
          _this.ruleForm.picList[6].picId=d.type30;//收银台照片
          _this.ruleForm.picList[7].picId=d.type20;//门店内景照片
          _this.ruleForm.picList[8].picId=d.type160;//法人持证件照
          _this.ruleForm.picList[9].picId="http://cypay.caiyu123.com/payimages/boss/data/202105/181046092jvz.jpg";//商户收单协议照片
          _this.ruleForm.picList[10].picId=d.type80;//结算授权书
          _this.ruleForm.picList[11].picId=d.type40;//银行卡正面照
          _this.ruleForm.picList[13].picId=d.type60;//被授权人证件正面照
          _this.ruleForm.picList[14].picId=d.type50;//被授权人证件背面照
        });
    },
    submitForm(formName) {//表单验证
        let _this = this;
        this.$refs[formName].validate((valid,object) => {
            if(valid) {
                _this.getForm()
            }else{
                for (const i in object) {
                    let dom = this.$refs[i]
                    // 这里是针对遍历的情况（多个输入框），取值为数组
                    if (Object.prototype.toString.call(dom) !== '[object Object]') { 
                        dom = dom[0]
                    }
                        // 第一种方法（包含动画效果）
                        dom.$el.scrollIntoView({ // 滚动到指定节点
                        // 值有start,center,end，nearest，当前显示在视图区域中间
                        block: 'center', 
                        // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                        behavior: 'smooth' 
                    });
                    break // 跳出循环了
                }
            }
        });
    },
    getOpen(e) {//点击导航二级
        console.log(e);
    },
    getSelect(){//保存信息
        let data={};
        let _this=this;
        data.inputInfo=JSON.stringify(this.ruleForm);
        data.merchantId=this.posmerchantInfo.id
        data.channelId="321";
        merchantInput(data).then(d=>{
          _this.$message({
              message: '保存成功',
              type: 'success'
          });
        });
    },
    getForm() {//提交表单
        let _this=this;
        let data=JSON.parse(JSON.stringify(this.ruleForm));
        data.merchantId=this.posmerchantInfo.id
        data.channelId="321";
        data.channelName="葫芦天下支付";
        data.channelType="110"
        data.scanRate=_this.ruleForm.channelList[0].prdList[0].feeTemplate;
        if(data.merType=='MERCHANT_01'){
            data.merFullName="商户_"+data.merFullName;
        };
        data.channelList[0].bankCode=_this.bankList.find(t=>t.bankname==data.channelList[0].bankName);//开户银行银行号
        data.picList=JSON.stringify(data.picList);
        data.channelList[0].prdList=JSON.stringify(data.channelList[0].prdList)
        data.channelList=JSON.stringify(data.channelList);
        this.formLoading=true
        hltxaddpart(data).then(d=>{
          _this.$message({
              message: '添加成功',
              type: 'success'
          });
          setTimeout(function(){
            _this.$router.go(-1)
          },2000)
        }).finally(d=>{
            _this.formLoading=false
        });
    },
    getAddImage(res) {//上传图片成功返回
        if(res.code==1){
            this.ruleForm.picList[Number(res.data.field)].picId = res.data.imageUrl;
        }else{
            this.$message.error(res.msg);
        }
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||file.type ==='image/png';
        const isLt1M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
          return;
        }
        if (!isLt1M) {
          this.$message.error('上传图片大小不能超过 2MB!');
          return;
        };
    },
    getSubBankList(e,e1,e2){//获取开户支行列表
        if(e2){
            this.ruleForm.channelList[e1].bankCode=this.bankList.find(t=>t.bankname==e).bankcode;
            this.ruleForm.channelList[e1].branchName='';
        };
        let _this=this;
        let data={};
        data.headBankName=this.ruleForm.channelList[e1].bankName;
        data.size=50;
        data.bankName=e;
        subBankList(data).then(d=>{
          _this.subBankList=d.data;
        });
    },
    getSubBankNo(e,e1){//通过银行与支行查支行联行号
        let _this=this;
        let data={};
        data.headBankName=e1;
        data.size=50;
        data.bankName=e;
        subBankList(data).then(d=>{
          _this.ruleForm.channelList[0].pbcBankId=d.data[0].bankNo;//开户银行支行联行号
        });
    },
    getSubBranchName(e,e1){//银行联行号
        this.ruleForm.channelList[e1].pbcBankId=this.subBankList.find(t=>t.subBranchName==e).bankNo;
    },
  },
  watch:{
    "ruleForm.shopArea":function(e){
        if(e){
            this.ruleForm.province=e[0];//省份
            this.ruleForm.city=e[1];//城市
            this.ruleForm.area=e[2];//区县
        }
    },
    "ruleForm.legalCertType":function(e){
        if(e==1){//长期
            this.ruleForm.legalCertEndDate="2099-12-31"
        }
    },
    "ruleForm.businesslicenseType":function(e){
        if(e==1){//长期
            this.ruleForm.businesslicenseExpired="2099-12-31"
        }
    },
  }
}
</script>

